<template>
  <div>
    <hd titles="我的积分"></hd>
    <div class="inteHeader">
      <h2>可用积分</h2>
      <h1>{{points}}</h1>
      <van-button type="default" class="howGet" to="/integralRules">如何获取积分</van-button>
      <van-button type="default" class="getMinxi" to="/integral">积分商城</van-button>
    </div>
    <van-tabs v-model="active">
      <van-tab title="全部">
        <div class="myInteCard clear" v-for="item in list">
          <div class="myInteCardLeft">
            <h4>{{item.tit}}</h4>
            <p>{{item.time}}</p>
          </div>
          <div class="myInteCardRight">
            {{item.spend}}
          </div>
        </div>
      </van-tab>
      <van-tab title="获取">
        <div class="myInteCard clear" v-for="item in listType.listType1">
          <div class="myInteCardLeft">
            <h4>{{item.tit}}</h4>
            <p>{{item.time}}</p>
          </div>
          <div class="myInteCardRight">
            {{item.spend}}
          </div>
        </div>
      </van-tab>
      <van-tab title="消耗">
        <div class="myInteCard clear" v-for="item in listType.listType2">
          <div class="myInteCardLeft">
            <h4>{{item.tit}}</h4>
            <p>{{item.time}}</p>
          </div>
          <div class="myInteCardRight">
            {{item.spend}}
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <ftr></ftr>
  </div>
</template>

<script>
  import hd from "../../public/hd";
  import ftr from "../../public/ftr";

  let list = [{
    id: 1,
    tit: '积分商城兑换50积分',
    time: '2020-11-10 15:02:20',
    spend: -50
  }, {
    id: 2,
    tit: '下单时赠送积分',
    time: '2020-11-10 15:02:20',
    spend: 80
  }, {
    id: 1,
    tit: '签到赠送积分',
    time: '2020-11-10 15:02:20',
    spend: 2
  }],
    listType=[];

  export default {
    name: "myIntegral",
    components:{
      'hd':hd,
      'ftr':ftr
    },
    data() {
      return {
        active: 0,
        list:list,
        listType: listType,
        points:this.$store.state.curLoginUser.points
      };
    },
    created() {
      this.listType=this.spendType(list);
    },
    methods:{
      spendType(list){
        let listType1=[],listType2=[];
        for (let i=0;i<list.length;i++){
          if (list[i].spend>=0){
            listType1.push(list[i]);
          }else if (list[i].spend<0){
            listType2.push(list[i]);
          }
        }
        return {
          listType1:listType1,
          listType2:listType2
        }
      }
    }
  }
</script>

<style scoped>
  * {
    padding: 0;
    margin: 0;
  }

  .clear::before,
  .clear::after {
    display: table;
    content: '';
  }

  .clear::after {
    clear: both;
  }

  .inteHeader {
    text-align: center;
    width: 100%;
    height: 200px;
    background-color: #ffce80;
  }

  .inteHeader > h1,
  .inteHeader > h2 {
    padding-top: 20px;
    color: #fff;
  }

  .inteHeader > h1 {
    padding-bottom: 20px;
  }

  .howGet,
  .getMinxi {
    background-color: #ffce80;
    color: #fff;
    border: 1px solid #fff;
    padding: 0 10px;
    border-radius: 5px;
    margin: 0 2%;
  }

  .myInteCard {
    height: 50px;
    padding: 5px 3%;
  }

  .myInteCardLeft {
    float: left;
    text-align: left;
  }

  .myInteCardLeft > h4 {
    height: 30px;
    line-height: 30px;
  }

  .myInteCardLeft > span {
    height: 20px;
    line-height: 20px;
  }

  .myInteCardRight {
    float: right;
    height: 50px;
    line-height: 50px;
  }
</style>
